<template>
	<div class="app-container">
		<el-form :model="queryParams" ref="queryParams" :inline="true">
			<el-collapse>
				<el-collapse-item title="搜索条件" name="1">
					<el-row>
						<el-col :span="6">
							<el-form-item label="新房名称" prop="name">
								<el-input v-model="queryParams.name" placeholder="请输入新房名称" clearable size="small" @keyup.enter.native="handleQuery" />
							</el-form-item>
						</el-col>
						<el-col :span="6">
							<el-form-item label="物业类型" prop="statusId">
								<el-select v-model="queryParams.statusId" placeholder="物业类型" clearable size="small">
									<el-option v-for="dict in houseNewStatus" :key="dict.dictCode" :label="dict.dictLabel" :value="dict.dictValue" />
								</el-select>
							</el-form-item>
						</el-col>
						<el-col :span="6">
							<el-form-item label="房屋类型" prop="typesId">
								<el-select v-model="queryParams.typesId" placeholder="房屋类型" clearable size="small">
									<el-option v-for="dict in houseNewType" :key="dict.dictCode" :label="dict.dictLabel" :value="dict.dictValue" />
								</el-select>
							</el-form-item>
						</el-col>
						<el-col :span="6">
							<el-form-item label="审核状态" prop="aduitState">
								<el-select v-model="queryParams.aduitState" placeholder="审核状态" clearable size="small">
									<el-option v-for="dict in houseAduitState" :key="dict.dictCode" :label="dict.dictLabel" :value="dict.dictValue" />
								</el-select>
							</el-form-item>
						</el-col>
						<el-col :span="6">
							<el-form-item label="房屋均价" prop="avgPrice1">
								<el-input v-model="queryParams.avgPrice1" placeholder="请输入均价最低价" clearable size="small" @keyup.enter.native="handleQuery" />
							</el-form-item>
						</el-col>
						<el-col :span="6">
							<el-form-item label="房屋均价" prop="avgPrice2">
								<el-input v-model="queryParams.avgPrice2" placeholder="请输入均价最高价" clearable size="small" @keyup.enter.native="handleQuery" />
							</el-form-item>
						</el-col>
						<el-col :span="6">
							<el-form-item label="起始时间" prop="openTime1">
								<el-date-picker v-model="queryParams.openTime1" type="date" placeholder="选择日期" value-format="yyyy-MM-dd">
								</el-date-picker>
							</el-form-item>
						</el-col>
						<el-col :span="6">
							<el-form-item label="终止时间" prop="openTime2">
								<el-date-picker v-model="queryParams.openTime2" type="date" placeholder="选择日期" value-format="yyyy-MM-dd">
								</el-date-picker>
							</el-form-item>
						</el-col>
						<el-col :span="24">
							<!-- 父子组件之间存在异步问题 -->
							<AreaSelect v-on:city-event="selectCityValues"/>
						</el-col>
						<div class="queryButton">
							</el-form-item>
							<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
							<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
							</el-form-item>
						</div>
					</el-row>
				</el-collapse-item>
			</el-collapse>
		</el-form>
		<!--显示表格-->
		<div style="margin-top: 20px;">
			<router-link :to="'/system/house-edit/index/' + id " class="link-type">
				<el-button type="primary">新增新房</el-button>
			</router-link>
		</div>

		<el-table :data="houseNewData" style="width: 100%">
			<el-table-column prop="id" label="新房主键" width="98">
			</el-table-column>
			<el-table-column prop="name" label="新房名称" width="98" :show-overflow-tooltip="true">
			</el-table-column>
			<el-table-column prop="isFinished" label="信息完成" width="98">
				<template scope="scope">
					<el-tag v-if="scope.row.isFinished === '0'" type="success">已完成</el-tag>
					<el-tag v-else type="danger">未完成</el-tag>
				</template>
			</el-table-column>
			<el-table-column prop="statusName" label="房屋状态" width="98">
			</el-table-column>
			<el-table-column prop="typesName" label="房屋类型" width="98">
			</el-table-column>
			<el-table-column prop="avgPrice" label="房屋均价" width="98">
			</el-table-column>
			<el-table-column prop="totalPrice" label="房屋总价" width="98">
			</el-table-column>
			<el-table-column prop="address" label="房屋地址" width="98" :show-overflow-tooltip="true">
			</el-table-column>
			<el-table-column prop="salesAddress" label="售楼地址" width="98" :show-overflow-tooltip="true">
			</el-table-column>
			<el-table-column prop="developers" label="开发商" width="98" :show-overflow-tooltip="true">
			</el-table-column>
			<el-table-column prop="feature" label="楼盘特色" width="98" :show-overflow-tooltip="true">
			</el-table-column>
			<el-table-column prop="openTime" label="开盘时间">
			</el-table-column>
			<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
				<template slot-scope="scope">
					<router-link :to="'/system/house-edit/index/' + scope.row.id " class="link-type">
						<el-button size="mini" type="text" icon="el-icon-edit">修改</el-button>
					</router-link>
					<router-link :to="'/system/information/index/' + scope.row.id " class="link-type">
						<el-button size="mini" type="text" icon="el-icon-edit">查看详情</el-button>
					</router-link>
					</el-button>
				</template>
			</el-table-column>
		</el-table>

		<div class="page">
			<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="houseNewData.page"
			 :page-sizes="[1,2,5,10,20]" :page-size="houseNewData.size" layout="total, sizes, prev, pager, next, jumper" :total="total">
			</el-pagination>
		</div>
	</div>
</template>

<script>
	import {
		getDate
	} from "../../../api/data.js"
	import {
		getHouseListByPage,
		addHouseList,
		updateHouseList,
		deleteHouseList
	} from "../../../api/houseNew.js"
	import AreaSelect from "../../../components/AreaSelect/index.vue"
	export default {
		name: 'Area',
		components: {
			AreaSelect
		},
		data() {
			return {
				id: 0,
				houseNewData: [],
				queryParams: {
					id: undefined,
					page: 1,
					size: 10,
					name: undefined,
					statusId: undefined,
					typesId: undefined,
					avgPrice1: undefined,
					avgPrice2: undefined,
					openTime1: undefined,
					openTime2: undefined,
					aduitState: undefined,
					pid:undefined,
					cid:undefined,
					aid:undefined,
					isFinished:undefined
				},
				total: 0,
				houseNewStatus: [],
				houseNewType: [],
				houseAduitState: []
			}
		},
		created() {
			this.getHouse();
			this.getHouseNewStatusList();
		},
		methods: {
			getHouse() {
				getHouseListByPage(this.queryParams).then(resp => {
					this.houseNewData = resp.data;
					this.total = resp.count;
				})
			},
			handleSizeChange(size) {
				this.queryParams.size = size
				this.getHouse();
			},
			handleCurrentChange(page) {
				this.queryParams.page = page;
				this.getHouse();
			},
			handleQuery() {
				this.getHouse();
			},
			resetQuery() {
				this.$refs['queryParams'].resetFields();
				this.getHouse();
			},
			getHouseNewStatusList() {
				//查询房屋状态：在售、售罄
				let houseStatusQuery = {
					dictId: '18'
				};
				getDate(houseStatusQuery).then(resp => {
					this.houseNewStatus = resp.data;
				})
				//查询房屋类型：住宅、商业
				let houseTypeQuery = {
					dictId: '13'
				};
				getDate(houseTypeQuery).then(resp => {
					this.houseNewType = resp.data;
				})
				//查询审核状态：已审核、未审核
				let aduitStateType = {
					dictId: '23'
				}
				getDate(aduitStateType).then(resp => {
					this.houseAduitState = resp.data
				})
			},
			// 父组件获取子组件的值
			selectCityValues(obj) {
				this.queryParams['pid'] = obj.pid;
				this.queryParams['cid'] = obj.cid;
				this.queryParams['aid'] = obj.aid;
			}
		}
	}
</script>

<style>
	.el-row {
		margin-top: 20px;
		margin-bottom: 40px;

		&:last-child {
			margin-bottom: 0;
		}
	}

	.el-col {
		margin-bottom: 0.5rem;
	}

	.el-input--suffix .el-input__inner {
		width: 150px;
	}

	.areaTree {
		display: block;
		white-space: nowrap;
		max-width: 80px;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.el-input__inner {
		width: 200px;
	}

	.el-dialog {
		width: 400px;
	}

	.el-input__inner {
		width: 100px;
	}

	.page {
		padding-top: 10px;
		text-align: center;
	}

	.queryButton {
		text-align: center;
	}
	.el-collapse-item__header{
		font-size: 20px;
		    background: #f6f6f6;
		    padding-left: 40px;
	}
</style>
